<template>
	<view style="width: 92%;margin: 20rpx auto;">
		<view class="lee-select-display" v-if="currentSelected.length">
			<view class="lee-select-display-item"
				v-for="(v, k) of currentSelected"
				:key="k"
				:class="{ active: currentLevel === k }"
				@click="skipLevel(k)"
			>{{ v.title }}</view>
			<view class="lee-select-display-item"
				v-if="placeholder">{{ placeholder }}</view>
		</view>
		<view v-if="currentLevel==0" class="fenlei">
			<view style="overflow: hidden;">
				<view v-for="(item, index) in fl_list" :key='index' @click="xia_tiao(item.is_child,item.id,item)" style="text-align: center;width: 20%;float: left;margin-bottom: 20rpx;">
					<image :src="item.logo_image" style="width: 60rpx;height: 60rpx;" mode=""></image>
					<view style="font-size: 24rpx;color: #000000;line-height: 30rpx;">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- <swiper :indicator-dots="fl_xianshi" :class="['swiper',gaodu?'da_gao':'xiao_gao']" >
				<swiper-item>
					<u-grid :border="false" >
					    <u-grid-item @click="xia_tiao(item.is_child,item.id,item)"
					            :customStyle="{width:138+'rpx',height:138+'rpx'}"
					            v-for="(item, index) in fl_list.slice(0,10)"
					            :index="index"
					            :key="index"
					    >
					        <image :src="item.logo_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
					        <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
					        	{{item.title}}
					        </view>
					    </u-grid-item>
					</u-grid>
				</swiper-item>
				<swiper-item v-if="fl_list.length>10" >
					<u-grid :border="false" >
					    <u-grid-item @click="xia_tiao(item.is_child,item.id,item)"
					            :customStyle="{width:138+'rpx',height:138+'rpx'}"
					            v-for="(item, index) in fl_list.slice(10,20)"
					            :index="index+10"
					            :key="index"
					    >
					        <image :src="item.logo_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
					        <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
					        	{{item.title}}
					        </view>
					    </u-grid-item>
					</u-grid>
				</swiper-item>
				<swiper-item v-if="fl_list.length>20" >
					<u-grid :border="false" >
					    <u-grid-item @click="xia_tiao(item.is_child,item.id,item)"
					            :customStyle="{width:138+'rpx',height:138+'rpx'}"
					            v-for="(item, index) in fl_list.slice(20,30)"
					            :index="index+20"
					            :key="index"
					    >
					        <image :src="item.logo_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
					        <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
					        	{{item.title}}
					        </view>
					    </u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper> -->
		
		</view>
		
		<view v-if="currentLevel==1" class="fenlei">
			<view style="overflow: hidden;">
				<view v-for="(item, index) in fl_list1" :key='index' @click="xia_tiao1(item.is_child,item.id,item)" style="text-align: center;width: 20%;float: left;margin-bottom: 20rpx;">
					<image :src="item.logo_image" style="width: 60rpx;height: 60rpx;" mode=""></image>
					<view style="font-size: 24rpx;color: #000000;line-height: 30rpx;">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- <swiper :indicator-dots="fl_xianshi1" :class="['swiper',gaodu1?'da_gao':'xiao_gao']" >
				<swiper-item>
					<u-grid :border="false" >
					    <u-grid-item @click="xia_tiao1(item.is_child,item.id,item)"
					            :customStyle="{width:138+'rpx',height:138+'rpx'}"
					            v-for="(item, index) in fl_list1.slice(0,10)"
					            :index="index"
					            :key="index"
					    >
					        <image :src="item.logo_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
					        <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
					        	{{item.title}}
					        </view>
					    </u-grid-item>
					</u-grid>
				</swiper-item>
				<swiper-item v-if="fl_list1.length>10" >
					<u-grid :border="false" >
					    <u-grid-item @click="xia_tiao1(item.is_child,item.id,item)"
					            :customStyle="{width:138+'rpx',height:138+'rpx'}"
					            v-for="(item, index) in fl_list1.slice(10,20)"
					            :index="index+10"
					            :key="index"
					    >
					        <image :src="item.logo_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
					        <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
					        	{{item.title}}
					        </view>
					    </u-grid-item>
					</u-grid>
				</swiper-item>
				<swiper-item v-if="fl_list1.length>20" >
					<u-grid :border="false" >
					    <u-grid-item @click="xia_tiao1(item.is_child,item.id,item)"
					            :customStyle="{width:138+'rpx',height:138+'rpx'}"
					            v-for="(item, index) in fl_list1.slice(20,30)"
					            :index="index+20"
					            :key="index"
					    >
					        <image :src="item.logo_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
					        <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
					        	{{item.title}}
					        </view>
					    </u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper> -->
		
		</view>
		
		<view v-if="currentLevel==2" class="fenlei">
			<view style="overflow: hidden;">
				<view v-for="(item, index) in fl_list2" :key='index' @click="xia_tiao2(item.is_child,item.id,item)" style="text-align: center;width: 20%;float: left;margin-bottom: 20rpx;">
					<image :src="item.logo_image" style="width: 60rpx;height: 60rpx;" mode=""></image>
					<view style="font-size: 24rpx;color: #000000;line-height: 30rpx;">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- <swiper :indicator-dots="fl_xianshi2" :class="['swiper',gaodu2?'da_gao':'xiao_gao']" >
				<swiper-item>
					<u-grid :border="false" >
					    <u-grid-item @click="xia_tiao2(item.is_child,item.id,item)"
					            :customStyle="{width:138+'rpx',height:138+'rpx'}"
					            v-for="(item, index) in fl_list2.slice(0,10)"
					            :index="index"
					            :key="index"
					    >
					        <image :src="item.logo_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
					        <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
					        	{{item.title}}
					        </view>
					    </u-grid-item>
					</u-grid>
				</swiper-item>
				<swiper-item v-if="fl_list2.length>10" >
					<u-grid :border="false" >
					    <u-grid-item @click="xia_tiao2(item.is_child,item.id,item)"
					            :customStyle="{width:138+'rpx',height:138+'rpx'}"
					            v-for="(item, index) in fl_list2.slice(10,20)"
					            :index="index+10"
					            :key="index"
					    >
					        <image :src="item.logo_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
					        <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
					        	{{item.title}}
					        </view>
					    </u-grid-item>
					</u-grid>
				</swiper-item>
				<swiper-item v-if="fl_list2.length>20" >
					<u-grid :border="false" >
					    <u-grid-item @click="xia_tiao2(item.is_child,item.id,item)"
					            :customStyle="{width:138+'rpx',height:138+'rpx'}"
					            v-for="(item, index) in fl_list2.slice(20,30)"
					            :index="index+20"
					            :key="index"
					    >
					        <image :src="item.logo_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
					        <view style="font-size: 24rpx;color: #000000;margin-top: 10rpx;">
					        	{{item.title}}
					        </view>
					    </u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper> -->
		
		</view>
		
		
		<view v-if="fanwei_list.length>0" style="overflow: hidden;width: 100%;margin: 20rpx auto;" >
			<view v-for="(item,index) in fanwei_list" :key='index' style="float: left;line-height: 60rpx;height: 60rpx;padding: 0 30rpx;margin: 10rpx;font-size: 26rpx;color: #333333;background-color: #F3F3F3;border-radius: 30rpx;display: inline-block;">
				{{item}} <text @click="jianshao(index)" style="color: #999999;font-size: 26rpx;margin-left: 16rpx;display: inline-block;float: right;" class="iconfont icon-guanbi1"></text>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				fl_xianshi:false,
				fl_list:[],
				pid:'',
				gaodu:false,
				currentSelected: [],
				currentLevel: 0,
				
				fl_xianshi1:false,
				fl_list1:[],
				gaodu1:false,
				two_pid:'',
				
				
				fl_xianshi2:false,
				fl_list2:[],
				gaodu2:false,
				three_pid:'',
				
				simple:[],
				
				
				fanwei_list:[],
				fw_id:[]
			}
		},
		onLoad() {
			this.fl()
		},
		methods:{
			// 跳转到指定级数
			skipLevel(level) {
				this.currentLevel = level
			},
			// 一级分类
			fl: function() {
				this.post('api/index/category', '', true).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.fl_list = res.data
						if (res.data.length > 10) {
							this.fl_xianshi = true
						}
						if(this.fl_list.length >5){
							this.gaodu=true
						}
					}
				})
			},
			xia_tiao:function(type,pid,item){
				let that=this
				console.log(1123456)
				console.log(type,111111)
				this.pid=pid
				this.currentSelected = [item]
				this.currentLevel = 1
				this.submit()
				if(type==1){
					this.two_tz_fl()
				}else{
					this.fl_list1=''
					uni.showModal({
						title: '当前选择',
						content: that.simple.join('-'),
						success: function (res) {
							if (res.confirm) {
								
								// that.currentLevel = 0
								// that.currentSelected=[]
								// that.fanwei_list.push(that.simple.join('-'))
								// that.fw_id.push(that.two_pid)
								let pages = getCurrentPages();
								let prevPage = pages[ pages.length - 2 ];
								prevPage.$vm.tz_leixing=that.simple.join('-')
								prevPage.$vm.tzlx_id=that.pid
								uni.navigateBack({
									delta:1
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			
			// 二级分类
			two_tz_fl: function() {
				this.post('api/voice/manage', {
					id: this.pid,
				}, true).then(res => {
					console.log(res,123456789)
					if (res.code == 1) {
						this.fl_list1=res.data
						if (this.fl_list1.length > 10) {
							this.fl_xianshi1 = true
						}
						if(this.fl_list1.length >5){
							this.gaodu1=true
						}
						
						// for(let i=0;i<this.yuan_list1.length;i++){
						// 	this.list1.push(this.yuan_list1[i].name)
						// }
						// if(this.list1.length>10){
						// 	this.fl_xianshi=true
						// }
						// this.tiezi()
					}
				})
			},
			xia_tiao1:function(type,pid,item){
				let that=this
				console.log(1123456)
				console.log(type,111111)
				this.two_pid=pid
				this.currentSelected.splice(1)
				this.$set(this.currentSelected, 1, item)
				this.submit()
				if(type==1){
					this.currentLevel = 2
					this.three_tz_fl()
				}else{
					uni.showModal({
						title: '当前选择',
						content: that.simple.join('-'),
						success: function (res) {
							if (res.confirm) {
								
								// that.currentLevel = 0
								// that.currentSelected=[]
								// that.fanwei_list.push(that.simple.join('-'))
								// that.fw_id.push(that.two_pid)
								let pages = getCurrentPages();
								let prevPage = pages[ pages.length - 2 ];
								prevPage.$vm.tz_leixing=that.simple.join('-')
								prevPage.$vm.tzlx_id=that.two_pid
								uni.navigateBack({
									delta:1
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			// 三级分类
			three_tz_fl: function() {
				this.post('api/voice/manage', {
					id: this.two_pid,
				}, true).then(res => {
					console.log(res,123456789)
					if (res.code == 1) {
						this.fl_list2=res.data
						if (this.fl_list2.length > 10) {
							this.fl_xianshi2 = true
						}
						if(this.fl_list2.length >5){
							this.gaodu2=true
						}
						// for(let i=0;i<this.yuan_list1.length;i++){
						// 	this.list1.push(this.yuan_list1[i].name)
						// }
						// if(this.list1.length>10){
						// 	this.fl_xianshi=true
						// }
						// this.tiezi()
					}
				})
			},
			xia_tiao2:function(type,pid,item){
				let that=this
				console.log(1123456)
				console.log(type,111111)
				this.three_pid=pid
				this.currentSelected.splice(2)
				this.$set(this.currentSelected, 2, item)
				this.submit()
				uni.showModal({
					title: '当前选择',
					content: that.simple.join('-'),
					success: function (res) {
						if (res.confirm) {
							// that.currentLevel = 0
							// that.currentSelected=[]
							// that.fanwei_list.push(that.simple.join('-'))
							// that.fw_id.push(that.three_pid)
							let pages = getCurrentPages();
							let prevPage = pages[ pages.length - 2 ];
							prevPage.$vm.tz_leixing=that.simple.join('-')
							prevPage.$vm.tzlx_id=that.three_pid
							uni.navigateBack({
								delta:1
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			// 提交当前选择
			submit() {
				let selected = this.currentSelected.slice(0)
				this.simple = selected.map(v => v.title)
			},
		},
		computed: {
			placeholder() {
				const ln = this.currentSelected.length
				if (ln === 0) return '请选择一级分类'
				if (ln === 1) return '请选择二级分类'
				// if (ln === 2) return '请选择三级分类'
				return ''
			}
		},
	}
</script>

<style lang="scss">
	
	$lee-spacing-small: 10upx;
	$lee-spacing-base: 30upx;
	$lee-spacing-large: 40upx;
	$lee-font-size-caption: 28upx;
	$lee-text-height: 60upx;
	
	page {
		background-color: #F8F8F8 !important;
		font-family: Demibold;
	}
	.fenlei {
		width: 100%;
		margin: 26rpx 0;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 10rpx 0 10rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}
	.da_gao{
		height: 320rpx;
	}
	.xiao_gao{
		height: 160rpx;
	}
	
	// 已选择显示
	.lee-select-display {
		padding: $lee-spacing-base;
		box-shadow: 0 2upx 2upx rgba(0, 0, 0, .15);
		
		&-item {
			height:80upx;
			line-height: 80upx;
			box-sizing: border-box;
			padding: 0 $lee-spacing-base;
			font-size: $lee-font-size-caption;
			border-left: 1px solid $uni-color-primary;
			position: relative;
			
			&.active {
				color: $uni-color-primary;
			}
			
			&::before {
				content: '';
				top: 0;
				left: -4upx;
				width: 8upx;
				height: 50%;
				background-color: $uni-bg-color;
				position: absolute;
				display: none;
			}
			&:first-child::before,
			&:last-child::before {
				display: block;
			}
			&:last-child::before {
				top: 50%;
			}
			
			&::after {
				font-size: 14upx;
				top: 50%;
				left: 0;
				content: '';
				width: 14upx;
				height: 14upx;
				border-radius: 50%;
				position: absolute;
				background-color: $uni-color-primary;
				transform: translate(-50%, -50%);
			}
			&:last-child::after {
				background-color: $uni-text-color-grey;
			}
		}
	}
</style>
